<template>
  <v-app>
    <v-app-bar app dark id="app-bar-fixed" style="margin-top:40px;">
      <v-btn-toggle v-model="icon" borderless>
        <v-btn tile  class="app-bar-btn-left">
          <v-icon left>mdi-home</v-icon> 主页
        </v-btn>

        <v-btn tile  class="app-bar-btn-left">
          Me
        </v-btn>
      </v-btn-toggle>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-content>
      <HelloWorld />
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",

  components: {
    HelloWorld
  },

  data: () => ({
    //
  })
};
</script>
<style>
#app-bar-fixed {
  height: 60px;
  margin-top: 50px;
  width: 100%;
  background-color: #dddbdb;
}
.app-bar-btn-left {
}
</style>
